<script lang="ts" setup>
  import { getUserEnrollList } from '@/api/user';
  import useTable from '@/hooks/table';
  import { UserGame } from '@/types/game';
  import { onMounted } from 'vue';
  import dayjs from 'dayjs';
  import GameCard from '@/components/game-card/index.vue';

  const props = defineProps<{
    userId: string;
  }>();

  const { pager, total, loading, list } = useTable<UserGame>();

  const initGameList = async () => {
    try {
      loading.value = true;

      const res = await getUserEnrollList({
        userId: props.userId,
        ...pager.value,
      });
      total.value = res.data.data.total || 0;
      list.value = res.data.data.list || [];
    } finally {
      loading.value = false;
    }
  };

  const handlePageIndexChanged = (pageIndex: number) => {
    pager.value.pageIndex = pageIndex;
    initGameList();
  };

  onMounted(() => {
    initGameList();
  });
</script>

<template>
  <a-col>
    <div class="section-title" style="margin-bottom: 20px">
      参赛记录
      <a-space style="margin-left: 20px">
        <a-button size="small" @click="initGameList">
          <template #icon><icon-refresh /></template>
          刷新
        </a-button>
      </a-space>
    </div>
    <a-table
      row-key="id"
      :loading="loading"
      size="small"
      :bordered="{ cell: true }"
      :data="list"
      :pagination="{
        current: pager.pageIndex,
        pageSize: pager.pageSize,
        total,
        showTotal: true,
        showJumper: true,
      }"
      @page-change="handlePageIndexChanged"
    >
      <template #columns>
        <a-table-column title="比赛">
          <template #cell="{ record }">
            <GameCard :game-info="record.gameDetailVO" />
          </template>
        </a-table-column>
        <a-table-column title="报名时间" :width="200">
          <template #cell="{ record }">
            {{ dayjs(record.gmtUpdate).format('YYYY/MM/DD HH:mm:ss') }}
          </template>
        </a-table-column>
        <a-table-column title="操作" align="center" :width="160">
          <template #cell="{ record }">
            <a-link :href="`/game/detail?id=${record.gameDetailVO.id}`" target="_blank">
              查看比赛详情
            </a-link>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-col>
</template>
